<template>
  <div class="ind_content">
    <div class="dis_sb_t">
      <!-- 基地/地块基本信息 -->
      <div class="panel1">
        <div class="ind_tit fs_16">基地/地块基本信息</div>
        <div class="panel1_list dis_sb_t">
          <router-link :to="item.url" class="panel1_item" v-for="(item, index) in panel1_list" :key="index">
            <img class="panel1_item_icon" :src="item.icon" alt="">
            <div class="panel1_item_sz">{{ item.sz }}</div>
            <div class="panel1_item_text">{{ item.text }}</div>
            <div class="panel1_item_bz">{{ item.bz }}</div>
          </router-link>
        </div>
      </div>
      <!-- 种植计划  /  排产计划 -->
      <div class="panel2">
        <router-link :to="planLink" class="more_btn_box">查看详情 <svg class="more_btn_box_icon"
            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.0048828125"
            height="16.0048828125" viewBox="0 0 16.0048828125 16.0048828125" fill="none">
            <g opacity="1" transform="translate(0 0)  rotate(0)">
              <g opacity="1" transform="translate(0 0)  rotate(0)">
                <g opacity="1" transform="translate(0 0)  rotate(0)">
                  <mask id="bg-mask-0" fill="white">
                    <use transform="translate(0 0)  rotate(0)" xlink:href="#path_0"></use>
                  </mask>
                  <g mask="url(#bg-mask-0)">
                    <mask id="mask-1" fill="white">
                      <path d="M0 16L16 16L16 0L0 0L0 16Z"></path>
                    </mask>
                    <g mask="url(#mask-1)"></g>
                    <g mask="url(#mask-1)">
                      <g opacity="1" transform="translate(3.0048828125 3.0048828125)  rotate(0)">
                        <path id="Vector" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                          d="M6.97006 5.11816L0.740006 0.548374C0.430004 0.324962 0 0.548374 0 0.934267L0 10.0738C0 10.4597 0.430004 10.6831 0.740006 10.4597L6.97006 5.88994C7.23006 5.697 7.23006 5.3111 6.97006 5.11816Z">
                        </path>
                        <path id="Vector 93 (Stroke)" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                          d="M8.80313 10.5801L9.53333 10.5801C9.7934 10.5801 10.0035 10.3668 10.0035 10.1027L10.0035 0.899776C10.0035 0.635675 9.7934 0.422363 9.53333 0.422363L8.80313 0.422363C8.54306 0.422363 8.33301 0.635675 8.33301 0.899776L8.33301 10.1027C8.33301 10.3668 8.54306 10.5801 8.80313 10.5801Z">
                        </path>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </g>
            <defs>
              <rect id="path_0" x="0" y="0" width="16" height="16" />
            </defs>
          </svg></router-link>
        <div class="dis_row">
          <div class="ind_tit c_p fs_16" :class="activePanel === 'panel1' ? '' : 'ind_tit_wei'"
            @click="handlePanelClick('panel1')">种植计划
          </div>
          <div class="ind_tit c_p fs_16" :class="activePanel === 'panel2' ? '' : 'ind_tit_wei'"
            @click="handlePanelClick('panel2')">排产计划
          </div>
        </div>
        <div class="jihua_panel" id="main">
          <!-- Panel 1 的内容 -->
          <div ref="chartRef" style="width: 100%;height: 100%;"></div>
        </div>
      </div>
    </div>
    <a-row class="pt_2">
      <a-col span="10">
        <!-- 农事操作 -->
        <div class="panel">
          <router-link to="/planting-process/production-scheduling-plan" class="more_btn_box">更多任务
            <svg class="more_btn_box_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              width="16.0048828125" height="16.0048828125" viewBox="0 0 16.0048828125 16.0048828125" fill="none">
              <g opacity="1" transform="translate(0 0)  rotate(0)">
                <g opacity="1" transform="translate(0 0)  rotate(0)">
                  <g opacity="1" transform="translate(0 0)  rotate(0)">
                    <mask id="bg-mask-0" fill="white">
                      <use transform="translate(0 0)  rotate(0)" xlink:href="#path_0"></use>
                    </mask>
                    <g mask="url(#bg-mask-0)">
                      <mask id="mask-1" fill="white">
                        <path d="M0 16L16 16L16 0L0 0L0 16Z"></path>
                      </mask>
                      <g mask="url(#mask-1)"></g>
                      <g mask="url(#mask-1)">
                        <g opacity="1" transform="translate(3.0048828125 3.0048828125)  rotate(0)">
                          <path id="Vector" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M6.97006 5.11816L0.740006 0.548374C0.430004 0.324962 0 0.548374 0 0.934267L0 10.0738C0 10.4597 0.430004 10.6831 0.740006 10.4597L6.97006 5.88994C7.23006 5.697 7.23006 5.3111 6.97006 5.11816Z">
                          </path>
                          <path id="Vector 93 (Stroke)" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M8.80313 10.5801L9.53333 10.5801C9.7934 10.5801 10.0035 10.3668 10.0035 10.1027L10.0035 0.899776C10.0035 0.635675 9.7934 0.422363 9.53333 0.422363L8.80313 0.422363C8.54306 0.422363 8.33301 0.635675 8.33301 0.899776L8.33301 10.1027C8.33301 10.3668 8.54306 10.5801 8.80313 10.5801Z">
                          </path>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
              <defs>
                <rect id="path_0" x="0" y="0" width="16" height="16" />
              </defs>
            </svg></router-link>
          <div class="ind_tit fs_16">农事操作 ( {{ (new Date()).getFullYear() }} )</div>
          <div class="nscz_box">
            <div class="nscz_l" ref="chartRef1"></div>
            <div class="nscz_r">
              <div class="nscz_r_item" v-for="(item, index) in nscz_list" :key="index">
                <div class="nscz_r_sz">{{ item.sz }}</div>
                <div class="nscz_r_text">{{ item.text }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 物联网IOT设备（总50个） -->
        <div class="panel panel6">
          <router-link to="/thingsuser/deviceData" class="more_btn_box">查看详情<svg class="more_btn_box_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.0048828125"
              height="16.0048828125" viewBox="0 0 16.0048828125 16.0048828125" fill="none">
              <g opacity="1" transform="translate(0 0)  rotate(0)">
                <g opacity="1" transform="translate(0 0)  rotate(0)">
                  <g opacity="1" transform="translate(0 0)  rotate(0)">
                    <mask id="bg-mask-0" fill="white">
                      <use transform="translate(0 0)  rotate(0)" xlink:href="#path_0"></use>
                    </mask>
                    <g mask="url(#bg-mask-0)">
                      <mask id="mask-1" fill="white">
                        <path d="M0 16L16 16L16 0L0 0L0 16Z"></path>
                      </mask>
                      <g mask="url(#mask-1)"></g>
                      <g mask="url(#mask-1)">
                        <g opacity="1" transform="translate(3.0048828125 3.0048828125)  rotate(0)">
                          <path id="Vector" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M6.97006 5.11816L0.740006 0.548374C0.430004 0.324962 0 0.548374 0 0.934267L0 10.0738C0 10.4597 0.430004 10.6831 0.740006 10.4597L6.97006 5.88994C7.23006 5.697 7.23006 5.3111 6.97006 5.11816Z">
                          </path>
                          <path id="Vector 93 (Stroke)" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M8.80313 10.5801L9.53333 10.5801C9.7934 10.5801 10.0035 10.3668 10.0035 10.1027L10.0035 0.899776C10.0035 0.635675 9.7934 0.422363 9.53333 0.422363L8.80313 0.422363C8.54306 0.422363 8.33301 0.635675 8.33301 0.899776L8.33301 10.1027C8.33301 10.3668 8.54306 10.5801 8.80313 10.5801Z">
                          </path>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
              <defs>
                <rect id="path_0" x="0" y="0" width="16" height="16" />
              </defs>
            </svg></router-link>
          <div class="ind_tit fs_16">物联网IOT设备<span></span></div>
          <div class="wlw_list">
            <a-row class="wlw_item_title">
              <a-col class="wlw_item_lie" span="3">#</a-col>
              <a-col class="wlw_item_lie text-l" span="8">设备</a-col>
              <a-col class="wlw_item_lie text-l" span="9">设备数量</a-col>
              <a-col class="wlw_item_lie" span="4">总站比</a-col>
            </a-row>
            <a-row class="wlw_item" v-for="(item, index) in wlw_list" :key="index">
              <a-col class="" span="3">{{ item.xl }}</a-col>
              <a-col class="text-l" span="8">{{ item.name }}</a-col>
              <a-col class="wlw_sbsl" span="9">
                <div class="progress-bar" v-if="item.sz">
                  <div class="progress-bar_k" :style="{ width: getProgressBarWidth(index) }"></div>
                </div>
              </a-col>
              <a-col class="wlw_zzb" span="4">
                <div class="wlw_zzb_z">{{ item.sz }}%</div>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
      <a-col span="6">
        <!-- 检验检测 -->
        <div class="panel panel4">
          <router-link to="/examination/submission" class="more_btn_box">查看详情 <svg class="more_btn_box_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.0048828125"
              height="16.0048828125" viewBox="0 0 16.0048828125 16.0048828125" fill="none">
              <g opacity="1" transform="translate(0 0)  rotate(0)">
                <g opacity="1" transform="translate(0 0)  rotate(0)">
                  <g opacity="1" transform="translate(0 0)  rotate(0)">
                    <mask id="bg-mask-0" fill="white">
                      <use transform="translate(0 0)  rotate(0)" xlink:href="#path_0"></use>
                    </mask>
                    <g mask="url(#bg-mask-0)">
                      <mask id="mask-1" fill="white">
                        <path d="M0 16L16 16L16 0L0 0L0 16Z"></path>
                      </mask>
                      <g mask="url(#mask-1)"></g>
                      <g mask="url(#mask-1)">
                        <g opacity="1" transform="translate(3.0048828125 3.0048828125)  rotate(0)">
                          <path id="Vector" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M6.97006 5.11816L0.740006 0.548374C0.430004 0.324962 0 0.548374 0 0.934267L0 10.0738C0 10.4597 0.430004 10.6831 0.740006 10.4597L6.97006 5.88994C7.23006 5.697 7.23006 5.3111 6.97006 5.11816Z">
                          </path>
                          <path id="Vector 93 (Stroke)" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M8.80313 10.5801L9.53333 10.5801C9.7934 10.5801 10.0035 10.3668 10.0035 10.1027L10.0035 0.899776C10.0035 0.635675 9.7934 0.422363 9.53333 0.422363L8.80313 0.422363C8.54306 0.422363 8.33301 0.635675 8.33301 0.899776L8.33301 10.1027C8.33301 10.3668 8.54306 10.5801 8.80313 10.5801Z">
                          </path>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
              <defs>
                <rect id="path_0" x="0" y="0" width="16" height="16" />
              </defs>
            </svg></router-link>
          <div class="ind_tit fs_16">检验检测</div>
          <div class="jyjc_list">
            <router-link to="/examination/submission" class="jyjc_item dis_sb" v-for="(item, index) in jyjc_list"
              :key="index">
              <div class="dis_row">
                <img class="jyjc_item_icon" :src="item.icon" alt="">
                <div class="">
                  <div class="jyjc_item_tit">{{ item.tit }}</div>
                  <div class="jyjc_item_text">{{ item.text }}</div>
                </div>
              </div>
              <div class="jyjc_item_fe">{{ item.fe }}份</div>
            </router-link>
          </div>
        </div>
        <!-- 赋码管理 -->
        <div class="panel panel7">
          <router-link to="/give-code/manage" class="more_btn_box">查看详情 <svg class="more_btn_box_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.0048828125"
              height="16.0048828125" viewBox="0 0 16.0048828125 16.0048828125" fill="none">
              <g opacity="1" transform="translate(0 0)  rotate(0)">
                <g opacity="1" transform="translate(0 0)  rotate(0)">
                  <g opacity="1" transform="translate(0 0)  rotate(0)">
                    <mask id="bg-mask-0" fill="white">
                      <use transform="translate(0 0)  rotate(0)" xlink:href="#path_0"></use>
                    </mask>
                    <g mask="url(#bg-mask-0)">
                      <mask id="mask-1" fill="white">
                        <path d="M0 16L16 16L16 0L0 0L0 16Z"></path>
                      </mask>
                      <g mask="url(#mask-1)"></g>
                      <g mask="url(#mask-1)">
                        <g opacity="1" transform="translate(3.0048828125 3.0048828125)  rotate(0)">
                          <path id="Vector" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M6.97006 5.11816L0.740006 0.548374C0.430004 0.324962 0 0.548374 0 0.934267L0 10.0738C0 10.4597 0.430004 10.6831 0.740006 10.4597L6.97006 5.88994C7.23006 5.697 7.23006 5.3111 6.97006 5.11816Z">
                          </path>
                          <path id="Vector 93 (Stroke)" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M8.80313 10.5801L9.53333 10.5801C9.7934 10.5801 10.0035 10.3668 10.0035 10.1027L10.0035 0.899776C10.0035 0.635675 9.7934 0.422363 9.53333 0.422363L8.80313 0.422363C8.54306 0.422363 8.33301 0.635675 8.33301 0.899776L8.33301 10.1027C8.33301 10.3668 8.54306 10.5801 8.80313 10.5801Z">
                          </path>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
              <defs>
                <rect id="path_0" x="0" y="0" width="16" height="16" />
              </defs>
            </svg></router-link>
          <div class="ind_tit fs_16">赋码管理</div>
          <div class="fm_box" v-if="qrcodeInfo">
            <div class="fm_cs">
              <img class="fm_cs_icon" src="@/assets/images/saoma.png" alt="">
              <div class="fm_cs_r">
                <div>{{ qrcodeInfo.total }}次</div>
                <div class="fm_cs_r_tj">累计扫码次数</div>
              </div>
            </div>
            <div class="fm_zshy" v-if="qrcodeInfo.mostPopularProduct">
              <img class="fm_zshy_img" :src="qrcodeInfo.mostPopularProduct.logo" alt="">
              <div>最受欢迎的产品： {{ qrcodeInfo.mostPopularProduct.name }}</div>
            </div>
            <div class="fm_zshy_sy dis_sb" v-if="qrcodeInfo.mostPopularProduct">
              <!-- <img class="fm_zshy_syma"
                src="https://img.js.design/assets/img/655ebe42ff4d4892ece52ae1.png#92248a795a4a38ece96e22173709e084"
                alt=""> -->
              <QrCode class="fm_zshy_syma" :value="qrcodeInfo.mostPopularProductUrl" :options="{ margin: 0 }" />
              <div class="fm_zshy_sy_r">
                <div class="fm_zshy_sy_js">扫码查看产品溯源详情</div>
                <div class="fm_zshy_sy_sj">
                  <img class="fm_zshy_sy_sj_icon" src="" alt="" />
                  <p>生成日期：{{ qrcodeInfo.mostPopularProduct.createTime.split(' ')[0] }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col span="8">
        <!-- 运输仓储 -->
        <div class="panel panel5">
          <router-link to="/storage" class="more_btn_box">查看详情<svg class="more_btn_box_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.0048828125"
              height="16.0048828125" viewBox="0 0 16.0048828125 16.0048828125" fill="none">
              <g opacity="1" transform="translate(0 0)  rotate(0)">
                <g opacity="1" transform="translate(0 0)  rotate(0)">
                  <g opacity="1" transform="translate(0 0)  rotate(0)">
                    <mask id="bg-mask-0" fill="white">
                      <use transform="translate(0 0)  rotate(0)" xlink:href="#path_0"></use>
                    </mask>
                    <g mask="url(#bg-mask-0)">
                      <mask id="mask-1" fill="white">
                        <path d="M0 16L16 16L16 0L0 0L0 16Z"></path>
                      </mask>
                      <g mask="url(#mask-1)"></g>
                      <g mask="url(#mask-1)">
                        <g opacity="1" transform="translate(3.0048828125 3.0048828125)  rotate(0)">
                          <path id="Vector" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M6.97006 5.11816L0.740006 0.548374C0.430004 0.324962 0 0.548374 0 0.934267L0 10.0738C0 10.4597 0.430004 10.6831 0.740006 10.4597L6.97006 5.88994C7.23006 5.697 7.23006 5.3111 6.97006 5.11816Z">
                          </path>
                          <path id="Vector 93 (Stroke)" fill-rule="evenodd" style="fill:#0F3659" opacity="1"
                            d="M8.80313 10.5801L9.53333 10.5801C9.7934 10.5801 10.0035 10.3668 10.0035 10.1027L10.0035 0.899776C10.0035 0.635675 9.7934 0.422363 9.53333 0.422363L8.80313 0.422363C8.54306 0.422363 8.33301 0.635675 8.33301 0.899776L8.33301 10.1027C8.33301 10.3668 8.54306 10.5801 8.80313 10.5801Z">
                          </path>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
              <defs>
                <rect id="path_0" x="0" y="0" width="16" height="16" />
              </defs>
            </svg></router-link>
          <div class="ind_tit fs_16 dis_row">
            <div>运输仓储</div>
            <div class="ysck_ts dis_row">
              <ul class="dis_row">
                <li class="dis_row">
                  <div class="ysck_ts_zs"></div>
                  <div>仓储</div>
                </li>
                <li class="dis_row">
                  <div class="ysck_ts_zs ysck_ts_zs1"></div>
                  <div>运输</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="yscc_list">
            <transition-group name="fade" v-if="news.length">
              <div class="yscc_item dis_sb news-item" v-for="item in news" :key="item.id">
                <div class="yscc_item_l">
                  <div class="yscc_item_l_zs" :class="item.lx === 2 ? 'yscc_item_l_zs1' : ''"></div>
                  <div class="yscc_item_l_text">{{ item.cpmc }}-{{ item.ccyq }}</div>
                </div>
                <div class="yscc_item_time">{{ item.time }}</div>
              </div>
            </transition-group>
            <img v-else class="wudata" src="@/assets/images/wudata.png" style="width: auto; height: 100%;" alt="">
          </div>
        </div>
        <!-- 害虫监测数据 -->
        <div class="panel panel8">
          <div class="ind_tit fs_16">害虫监测数据</div>
          <div class="yscc_list"><img class="wudata" src="@/assets/images/wudata.png" style="width: auto; height: 100%;"
              alt=""></div>
        </div>
      </a-col>
    </a-row>

  </div>
  <div class="container">
    <div class="zxh_btn" @click="toggleAnimation">
      <img class="zxh_btn_icon" src="/zxh.png" alt="">
      <div class="zxh_btn_bg" :class="btn_zt ? 'btn_zt' : ''"></div>
    </div>
    <div class="circle" :class="{ expanding: expanding, showMessage: showMessage }">
      <div class="zxh_btn_on" @click="toggleAnimation1">
        <img class="zxh_btn_icon" src="/zxh2.png" alt="">
        <div class="zxh_btn_bg" :class="btn_on_zt ? 'zxh_btn_on_ks' : ''"></div>
      </div>
      <div class="xinxi">
        <div class="xx_time" :class="wenzi_zt ? 'upward-text' : ''" style="animation-delay: 0.2s">
          <span>{{ currentTime }}</span>{{ currentDate }}
        </div>
        <div :class="wenzi_zt ? 'upward-text' : ''" style="animation-delay: .4s">{{ timePeriod }}好呀！农链七星</div>
        <div :class="wenzi_zt ? 'upward-text' : ''" style="animation-delay: .6s">今天又是美好的一天</div>
      </div>
      <div class="circle_bg" style="background: url(/qybg.jpg) no-repeat;"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import { QrCode } from '/@/components/Qrcode/index';
import * as echarts from 'echarts';
import { getBaseAndPlot, getGrowPlanData, getProductScheduleData, getProductScheduleTask, getInspectionData, getIotData, getQrcodeData, getStorageAndTransport } from './api'
const expanding = ref(false);
const btn_on_zt = ref(false);
const btn_zt = ref(false);
const wenzi_zt = ref(false);
function toggleAnimation() {
  expanding.value = true;
  wenzi_zt.value = true;

  setTimeout(() => {
    btn_on_zt.value = true;
  }, 500);

  if (expanding.value === true) {
    btn_zt.value = true;
  }
}
function toggleAnimation1() {
  expanding.value = false;
  btn_on_zt.value = false;
  wenzi_zt.value = false;
  showMessage.value = false;

  setTimeout(() => {
    btn_zt.value = false;
  }, 1000);

}
const currentTime = ref('');
const currentDate = ref('');
const timePeriod = ref('');

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})

function updateTime() {
  const date = new Date()
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')

  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')

  currentTime.value = `${hours}:${minutes}:${seconds}`;
  currentDate.value = `${year}-${month}-${day}`;

  if (hours >= '00' && hours < '12') {
    timePeriod.value = '上午'
  } else {
    timePeriod.value = '下午'
  }
}
const showMessage = ref(false);
let timeoutId: ReturnType<typeof setTimeout>;

// 五分钟不操作后
function startTimer() {
  timeoutId = setTimeout(() => {
    showMessage.value = true;
    expanding.value = true;
  }, 300000);
}

//showMessage为true时，移动鼠标隐藏
function resetTimer() {
  clearTimeout(timeoutId);
  // expanding.value = false;
  startTimer();
}

onMounted(() => {
  document.addEventListener("mousemove", resetTimer);
  document.addEventListener("keydown", resetTimer);
  startTimer();
});

onUnmounted(() => {
  clearTimeout(timeoutId);
  document.removeEventListener("mousemove", resetTimer);
  document.removeEventListener("keydown", resetTimer);
});

const news = ref([]);
const jyjc_list = reactive([
  {
    field: 'solid',
    url: '',
    icon: '/jyjc_icon1.png',
    tit: '检测报告',
    text: '土壤',
    fe: '0'
  }, {
    field: 'product',
    url: '',
    icon: '/jyjc_icon2.png',
    tit: '检测报告',
    text: '品质',
    fe: '0'
  }
]);
const nscz_list = reactive([
  {
    url: '',
    sz: '0',
    text: '未发布 (项)'
  },
  {
    url: '',
    sz: '0',
    text: '进行中 (项)'
  },
  {
    url: '',
    sz: '0',
    text: '已完成 (项)'
  }, {
    url: '',
    sz: '0',
    text: '未执行 (项)'
  }
]);
const panel1_list = reactive([
  {
    field: 'base',
    icon: '/ind_pan1_1.png',
    url: '/basic-information/gis',
    text: '基地总面积 (亩)',
    sz: '0'
  }, {
    field: 'plot',
    icon: '/ind_pan1_2.png',
    url: '/basic-information/region',
    text: '地块数量 (块)',
    sz: '0',
    bz: ''
  }, {
    field: 'product',
    icon: '/ind_pan1_3.png',
    url: '/basic-information/product',
    text: '农产品 (种)',
    sz: '0'
  }, {
    field: 'inputs',
    icon: '/ind_pan1_4.png',
    url: '/investment/stock',
    text: '投入品 (种)',
    sz: '0',
    bz: ''
  }
]);

const option1 = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    // bottom: '-20px',
    // orient: 'vertical',
    bottom: '-7',
    itemWidth: 10, // 设置提示颜色的宽度
    itemHeight: 10, // 设置提示颜色的高度
    textStyle: {
      color: '#464E5F', // 设置文字颜色
      fontSize: 12, // 设置文字大小
      // fontWeight: 'bold' // 设置文字粗细
    },
  },
  series: [
    {
      name: '农事操作',
      type: 'pie',
      radius: ['40%', '70%'],
      // avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 0, name: '未发布', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#F5C75F' }, { offset: 1, color: 'rgba(245, 199, 95, 0)' }] } } },
        { value: 0, name: '进行中', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#4D82FB' }, { offset: 1, color: 'rgba(77, 130, 251, 0)' }] } } },
        { value: 0, name: '已完成', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#76F394' }, { offset: 1, color: 'rgba(118, 243, 148, 0)' }] } } },
        { value: 0, name: '未执行', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#FF828E' }, { offset: 1, color: 'rgba(255, 130, 142, 0)' }] } } },
      ]
    }
  ]
});
const chartRef1 = ref(null);
const qrcodeInfo = ref();
onMounted(async () => {
  await getBaseAndPlot().then(res => {
    panel1_list.map(item => {
      if (res.result.hasOwnProperty(item.field)) {
        const obj = res.result[item.field]
        item.sz = obj.sum
        if (obj.hasOwnProperty('newDataTime')) {
          item.bz = '最新数据：' + obj.newDataTime
        }
      }
      return item;
    })
  })
  handlePanelClick(activePanel.value);
  await getProductScheduleTask().then(res => {
    const chart = echarts.init(chartRef1.value);
    const statusArr = [-10, 10, 20, 0]
    statusArr.forEach((status, index) => {
      const item = res.result.filter((val: { status: number; }) => val.status == status).pop()
      if (item) {
        option1.series[0].data[index].value = item.sum || 0;
        nscz_list[index].sz = item.sum || 0;
      }
    })
    chart.setOption(option1);
  });
  await getInspectionData().then(res => {
    if (res.success) {
      jyjc_list.map(item => {
        if (res.result.hasOwnProperty(item.field)) {
          const obj = res.result[item.field]
          item.fe = obj.sum
        }
        return item;
      })
    }
  })
  getIotData().then(res => {
    if (res.code == 200) {
      Object.values(res.result).forEach((value, index) => {
        wlw_list.value.push({
          xl: '0' + index,
          name: value.desc,
          sz: (value.ratio * 100),
        })
      });
    }
  })
  await getQrcodeData().then(res => {
    qrcodeInfo.value = res.result
  })
  await getStorageAndTransport().then(res => {
    news.value = res.result.map(item => {
      return {
        lx: item.hasOwnProperty('distributionMode') ? 2 : 1,  // 1表示仓储；2表示运输
        cpmc: item.productNo + '(' + item.productNo_dictText + ')',
        ccyq: item.remark || item.ask,
        time: item.storageTime || item.createTime.split(' ')[0]
      }
    })
  })
});

const option = reactive({
  grid: {
    top: '10%', // 设置顶部边距
    bottom: '20%', // 设置底部边距
    left: '10%', // 设置左侧边距
    right: '10%' // 设置右侧边距
  },
  legend: {
    trigger: 'item',
    bottom: '0%',
    textStyle: {
      color: '#464E5F',
      fontSize: 12,
    },
  },
  xAxis: {
    type: 'category',
    data: [],
    name: '月份'
  },
  yAxis: {
    type: 'value',
    name: '数量'
  },
  series: [{
    // name: '种植产品一',
    data: [],
    type: 'bar',
    smooth: true,
    label: {
      show: true, // 显示标签
      position: 'top', // 标签位置
      formatter: '{c}' // 标签内容，{c} 表示数据值
    },
    lineStyle: {
      color: '#3CD856', // 设置线条颜色为红色
      width: 3          // 设置线条粗细
    },
    itemStyle: {
      color: '#3CD856' // 设置节点圆圈颜色为蓝色
    },
  }],
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params, index) {
      let html = '<ul>';
      params[0].data.content.forEach(item => {
        html += '<li>' + item.planId + ': ' + item.productName + '</li>'
      })
      html += '</ul>';
      return params[0].data.content.length ? html : '';
    }
  }
  // series: [
  //   {
  //     name: '种植产品一',
  //     data: [206, 325, 321, 400, 212, 324, 214, 235, 325, 211, 398, 214],
  //     type: 'line',
  //     smooth: true,
  //     lineStyle: {
  //       color: '#A700FF', // 设置线条颜色为红色
  //       width: 3          // 设置线条粗细
  //     },
  //     itemStyle: {
  //       color: '#A700FF' // 设置节点圆圈颜色为蓝色
  //     }
  //   },
  // {
  //   name: '种植产品二',
  //   data: [250, 235, 105, 231, 365, 85, 306, 325, 256, 365, 362, 260],
  //   type: 'line',
  //   smooth: true,
  //   lineStyle: {
  //     color: '#EF4444',
  //     width: 3
  //   },
  //   itemStyle: {
  //     color: '#EF4444'
  //   }
  // },
  // {
  //   name: '种植产品三',
  //   data: [120, 235, 400, 362, 231, 265, 265, 325, 325, 231, 320, 268],
  //   type: 'line',
  //   smooth: true,
  //   lineStyle: {
  //     color: '#3CD856',
  //     width: 3
  //   },
  //   itemStyle: {
  //     color: '#3CD856'
  //   }
  // }
  // ],
  // 进度条
  // dataZoom: [
  //   {
  //     type: 'inside',
  //     start: 0,
  //     end: 10
  //   },
  //   {
  //     start: 0,
  //     end: 10
  //   }
  // ],
});
const chartRef = ref(null);

const wlw_list = ref([]);
const getProgressBarWidth = (index: number) => {
  return wlw_list.value[index].sz + '%';
};
const props = defineProps({
  activePanel: {
    type: String,
    default: 'panel2'
  }
});
const activePanel = ref(props.activePanel);
const handlePanelClick = async (panel: string) => {
  activePanel.value = panel;
  let data = {

    result: [{
      month: '',
      num: ''
    }]
  };
  if (panel == 'panel1') {
    planLink.value = '/planting-process/grow_plan'
    data = await getGrowPlanData();
  } else {
    planLink.value = '/planting-process/production-scheduling-plan'
    data = await getProductScheduleData();
  }
  if (data.success) {
    initTaskChart(data.result)
  }
};

const planLink = ref('/planting-process/grow_plan')
const getCurrentMonths = () => {
  // 创建一个数组来存储月份
  var monthsArray = [];
  // 获取当前年份
  var currentYear = new Date().getFullYear();
  // 循环遍历 12 个月
  for (var month = 1; month <= 12; month++) {
    // 将月份数字格式化为两位数
    var formattedMonth = month < 10 ? "0" + month : month;
    // 将格式化的年份和月份添加到数组
    var formattedDate = currentYear + "-" + formattedMonth;
    monthsArray.push(formattedDate);
  }
  return monthsArray;
}
const initTaskChart = (data: any) => {
  const chart = echarts.init(chartRef.value);
  option.xAxis.data = []
  option.series[0].data = [];
  data.forEach(({ month, num, detailData }) => {
    option.xAxis.data.push(month)
    option.series[0].data.push({ value: num, content: detailData || [] })
  })

  // const months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];//getCurrentMonths();
  // option.xAxis.data = months
  // option.series[0].data = []
  // months.forEach(month => {
  //   let current = data.filter(item => item.month.split('-')[1] == month)
  //   if (current.length) {
  //     option.series[0].data.push({ value: current[0].num, content: current[0].detailData || [] })
  //   } else {
  //     option.series[0].data.push({ value: 0, content: [] })
  //   }
  // })
  chart.setOption(option);
}
</script>
<style lang="less">
@import './style.less';

@font-face {
  font-family: electronicFont;
  src: url(/font/DS-DIGIT.TTF);
}

.container {
  position: relative;
  width: 100%;
}

.upward-text {
  animation: upwardAnimation .8s ease forwards;
  opacity: 0;
}

@keyframes upwardAnimation {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.xx_time {
  font-size: 2.5rem;
}

.xx_time span {
  font-size: 4rem;
  margin-right: 20px;
}

.xinxi {
  position: relative;
  top: 25%;
  left: 20%;
  color: #fff;
  font-family: "electronicFont";
  font-size: 1.5rem;
}

.xinxi div {
  margin-bottom: 1.3rem;
}

.zxh_btn_on {
  width: 60px;
  height: 60px;
  position: fixed;
  left: calc(95% - 30px);
  top: calc(90% - 30px);
  z-index: 998;
  color: #fff;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  // background: linear-gradient(90deg, #06BA96 0%, #39D28B 50.69%, #66E782 100%);
  // border-radius: 10px;
}

.zxh_btn_on .zxh_btn_bg {
  background: #fff !important;
  transform: rotate(45deg);
  border-radius: 50%;
}

.zxh_btn_on_ks {
  border-radius: 10px !important;
  transform: rotate(0deg) !important;
}

.zxh_btn {
  width: 60px;
  height: 60px;
  position: fixed;
  left: calc(95% - 30px);
  top: calc(90% - 30px);
  z-index: 998;
  color: #fff;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}

.zxh_btn:hover .zxh_btn_bg {
  transform: rotate(45deg);
  border-radius: 50%;
}

.zxh_btn_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, #06BA96 0%, #39D28B 50.69%, #66E782 100%);
  border-radius: 10px;
  transition: all .5s;
  z-index: 998;
}

.zxh_btn_icon {
  width: 30px;
  height: 30px;
  z-index: 999;
  position: relative;
}

.circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
  z-index: 999;
  opacity: 1;
  clip-path: circle(0px at 95% 90%);
  transition: all 1s;
}

.circle_bg {
  background-size: cover !important;
  background-position: center !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .3;
}

.expanding {
  clip-path: circle(100%);
}

.btn_zt {
  transform: rotate(45deg);
  border-radius: 50%;
}




.fm_zshy_syma canvas {
  max-width: 100%;
  max-height: 100%;
}

.news-container {
  height: 200px;
  overflow: hidden;
}

.news-item {
  line-height: 30px;
  animation: scroll 5s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}
</style>
